<template>
  <div class="box">
    <div id="main" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'

onMounted(() => {
  // 在组件首次渲染好之后，再去初始化图表
  var myChart = echarts.init(document.getElementById('main'))

  // 绘制图表
  myChart.setOption({
    title: {
      text: '在线听课人数'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })

  // 让图表自适应窗口尺寸的变化
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})
</script>

<style scoped>
.box {
  margin-top: 15px;
  box-sizing: border-box;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 15px;
}
</style>
